<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史、喜欢、稍后页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="referrer" content="no-referrer"/>
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
</head>
<style>
    .activeRed{
        background-color: pink;
    }
</style>
<body>

<div class="wrapper hp_1">

    <div id="app">
        <my-header></my-header>
    </div>
    <div id="userCenter">
        <section class="ab-history">
            <div class="history-lst">
                <div class="container">
                    <div class="history-hd-head">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li  :class='{ activeRed:index===number}' @click="loadMenu(index)"  class="nav-item" v-for="(item,index) in menu">
                                <a @click="addClass(index)" class="nav-link active" id="watch_history_tab" data-toggle="tab"
                                   href="#watch_history"
                                   role="tab" aria-controls="watch_history_tab" aria-selected="true">{{item}}</a>
                            </li>

                            <!-- <li class="nav-item">
                              <a class="nav-link" id="search_history_tab" data-toggle="tab" href="#search_history" role="tab" aria-controls="search_history_tab" aria-selected="false">Search history </a>
                            </li> -->
                        </ul><!--nav-tabs end-->
                        <a href="#" title="" class="clear-history">
                            <i class="icon-cancel"></i>
                            Clear all search history
                        </a>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" role="tabpanel"
                         aria-labelledby="watch_history_tab">
                        <div class="tabs_lzt">
                            <div class="tab-history" v-for="(item,index) in menuInfo">
                                <div class="videoo">
                                    <div class="vid_thumbainl ms">
                                        <a href="#" title="">
                                            <img :src="item.image">
                                            <span class="vid-time">{{item.durations}}</span>
                                            <span class="watch_later">
											<i class="icon-watch_later_fill"></i>
										</span>
                                        </a>
                                    </div><!--vid_thumbnail end-->
                                    <div class="video_info ms">
                                        <h3><a href="single_video_page.html" title="">{{item.title}}</a></h3>
                                        <h4><a href="Single_Channel_Playlist.html" title=""></a>{{item.username}} <span
                                                class="verify_ic"><i class="icon-tick"></i></span></h4>
                                        <span>686K views .<small
                                                class="posted_dt">{{item.createTime.substr(0,10)}}</small></span>
                                    </div>
                                    <a href="#" title="" class="delete-video">
                                        <i class="icon-cancel"></i>
                                    </a>
                                    <div class="clearfix"></div>
                                </div><!--videoo end-->
                            </div><!--tab-history end-->

                        </div><!--tabs_lz end-->
                    </div>
                </div>
            </div>
        </section><!--ab-history end-->


    </div>

</div><!--wrapper end-->


<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/header.js"></script>
<script>
    var app = new Vue({
        el: '#app',

    })
    new Vue({
        el: "#userCenter",
        data() {
            return {
                number:0,
                ip: "localhost",
                ipSchool: "192.168.21",
                menu: ["历史记录", "稍后观看", "我的收藏"],
                user: null,
                menuInfo: null,
            }
        },
        created() {
            this.getUserInfo();
            this.loadMenu(0)
        },
        methods: {
            loadMenu(index) {
                if (this.user) {
                    if (index == 0) {
                        axios.get("http://" + this.ip + ":11001/api/user/history/user/" + this.user.username,{params:{
                                "uid":this.getUid()
                            }}).then(res => {
                            this.menuInfo = null;
                            this.menuInfo = res.data.data
                            console.log(this.menuInfo)
                        })
                    } else if (index == 1) {
                        axios.get("http://" + this.ip + ":11001/api/user/like/user/" + this.user.username,{params:{
                                "uid":this.getUid()
                            }}).then(res => {
                            this.menuInfo = null;
                            this.menuInfo = res.data.data
                            menuInfo = res.data.data
                        })
                    } else {
                        axios.get("http://" + this.ip + ":11001/api/user/later/user/" + this.user.username,{params:{
                                "uid":this.getUid()
                            }}).then(res => {
                            this.menuInfo = null;
                            this.menuInfo = res.data.data
                            menuInfo = res.data.data
                        })
                    }
                }
            },
            addClass(index){
                this.number=index
                console.log(this.number)
            },
            getUserInfo() {
                if (JSON.parse(localStorage.getItem("user"))) {
                    this.user = JSON.parse(localStorage.getItem("user"))
                }
            },
            getUid() {
                return localStorage.getItem("uid");
            }
        }
    })
</script>

</body>
</html>
